<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" v-on:click="doIt" value="点我">
        <input type="button" @click="doIt" value="点我">
        <input type="button" @dblclick="doIt" value="点我">

        <h2 @click="change">{{menu}}</h2>
    </div>
    <!-- 
    1.v-on指令的作用是：为元素绑定事件
    2.事件名不需要写on
    3.指令可以简写为@
    4.绑定的方法定义在methods属性中
    5.方法内部通过this关键字可以访问定义在data中数据
    -->
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                menu:'猪肉粉条'
            },
            methods:{
                doIt:function(){
                    alert("11");
                },
                change:function(){
                    //console.log(this.menu);
                    this.menu = "没粉条";
                }
            }
        })
    </script>
</body>
</html>